<style scoped>
/*通过设定或者继承父级以下变量修改样式
  --card-padding: 0;
*/
.inner{width: 100%;flex-direction: row;align-items: stretch;padding: var(--card-padding, 0);}
.card .img{width: 28%;height: auto;flex-grow: 0;}
.card .content{width: 72%;font-size: 0.8em;flex-direction: column;align-items: stretch;padding: 2px 4px;}
.card .content>h4{font-size: 1.2em;}
.card .price_sales_num{justify-content: space-between;flex-wrap: wrap;}
.card .price_sales_num .money{font-weight: bold;font-size: 1.2em;}
.keyword>.van-tag{margin: 1px;}

.card.column .inner{flex-direction: column;}
.card.column .inner>*{width: 100%;}
</style>
<template>
  <div class="card" :class="{column:column}">
    <div class="inner flex" @click="click">
      <img-referrer class="img" :src="_href(head_img)" alt=""/>
      <div class="content flex">
        <h4 class="text-ellipsis">{{title}}</h4>
        <div class="keyword" v-if="keyword">
          <template v-for="kw in keywordArr"><van-tag v-if="kw" type="primary">{{kw}}</van-tag></template>
        </div>
        <div class="info" v-if="info">{{info}}</div>
        <slot name="content"></slot>
        <div class="max"></div>
        <div class="price_sales_num flex">
          <money v-if="value.price" class="money" :value="value.price"></money>
          <p v-if="value.sales">已售：{{ value.sales }}</p>
          <p v-if="value.stock">库存：{{ value.stock }}</p>
          <p v-if="value.num">数量：{{ value.num }}</p>
        </div>
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>

import {_href, map, to_string} from "@/js/s94_tool.js";
import Money from "@/components/widget/Money.vue";
import {href_handle} from "@/vue_plugin/router_auto.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

/**
 * @prop {*}
 */
export default {
  _title_: '项目卡片',
  _tip_: '显示项目的头图，标题，简介，关键词，价格等数据。',
  _css_var_: {
    '--card-padding': '0',
  },
  _head_img_: '',
  _group_: '单元组件',
  components: {ImgReferrer, Money},
  props:{
    head_img: {
      type: String,
      default: 'https://picsum.photos/200',
      _label_: '头图',
      _tip_: '',
      _required_: true,
      _default_: "get($info,'head_img')",
    },
    title: {
      type: String,
      default: '标题',
      _label_: '标题',
      _tip_: '',
      _required_: true,
      _default_: "get($info,'title')",
    },
    keyword: {
      type: [String,Array],
      _label_: '关键词',
      _tip_: '关键词、标签，多个逗号分隔，为空不显示',
      _default_: "get($info,'keyword')",
    },
    info: {
      type: String,
      _label_: '简介',
      _tip_: '为空不显示',
      _default_: "get($info,'info')",
    },
    price: {
      type: [String,Number],
      _label_: '价格',
      _tip_: '为空不显示',
      _default_: "get($info,'price')",
    },
    sales: {
      type: [String,Number],
      _label_: '销量',
      _tip_: '为空不显示',
      _default_: "concat(get($info,'sales'),get($info,'sales_base'))",
    },
    stock: {
      type: [String,Number],
      _label_: '库存',
      _tip_: '为空不显示',
      _default_: "get($info,'stock')",
    },
    num: {
      type: [String,Number],
      _label_: '数量',
      _tip_: '为空不显示',
      _default_: "get($info,'num')",
    },
    column: {
      type: Boolean,
      _label_: '上下结构',
      _tip_: '是否为头图在上，内容在下的上下结构分布',
    },
    href: {
      type: String,
      _label_: '跳转链接',
      _tip_: '点击后的跳转链接，为空点击后不跳转',
    },
  },
  data(){
    return {}
  },
  methods:{
    _href,
    click(){
      if (this.href) href_handle(this.href);
    }
  },
  computed:{
    keywordArr(){
      if (!this.keyword) return [];
      if (typeof this.keyword === 'string') return this.keyword.split(',');
      return this.keyword;
    },
    value(){
      return{
        price: to_string(this.price),
        sales: to_string(this.sales),
        stock: to_string(this.stock),
        num: to_string(this.num),
      }
    },
  },
  mounted(){
  }
}
</script>